<template>
  <div>
    <mall-shelf title="我的订单">
      <div slot="content">
        <div class="query">
          <div style="padding-left: 12px;">
            <el-form ref="queryForm" :model="queryParams" :inline="true">
              <el-form-item label="订单号">
                <el-input v-model="queryParams.salesOrderNo" size="small" style="width: 200px;line-height: 60px;" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item label="客户">
                <el-input v-model="queryParams.customerName" size="small" style="width: 200px;line-height: 60px;" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.orderStatus" size="small" style="width: 200px;line-height: 60px;" placeholder="订单状态" clearable>
                  <el-option v-for="option in options.salesOrderStatusOptions" :key="option.dictValueCode" :label="option.dictValueName" :value="option.dictValueCode" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <div style="line-height: 60px;">
                  <mall-button text="查询" class-style="main-btn" style="margin-left: 10px;" @btnClick="handleQuery" />
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div v-if="page.records.length" v-loading="loading" element-loading-text="加载中..." style="min-height: 10vw;">
          <el-table v-loading="loading" :data="page.records" highlight-current-row>
            <el-table-column type="expand">
              <template slot-scope="props" style="padding: 20px 50px;">
                <el-table v-loading="loading" :data="props.row.items" highlight-current-row>
                  <el-table-column label="商品图片" align="center">
                    <template slot-scope="scope">
                      <a :title="scope.row.spuName" target="_blank" @click="toGoodsDetail(scope.row.spuId)">
                        <img :alt="scope.row.spuName" :src="attachUrl(scope.row.image)">
                      </a>
                    </template>
                  </el-table-column>
                  <el-table-column label="型号" align="center" prop="model" width="150px" />
                  <el-table-column label="商品名称" align="center" prop="spuName" width="150px" />
                  <el-table-column label="价格" align="center" prop="price" width="150px" />
                  <el-table-column label="数量" align="center" prop="qty" width="150px" />
                  <el-table-column label="小计" align="center">
                    <template slot-scope="scope">
                      ¥ {{ Number(scope.row.price * scope.row.qty).toFixed(2) }}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="订单号" align="center" width="150px">
              <template slot-scope="scope">
                <a @click="toOrderDetail(scope.row.id)">{{ scope.row.salesOrderNo }}</a>
              </template>
            </el-table-column>
            <el-table-column label="提交时间" align="center" prop="createTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户" align="center" prop="customerName" width="150px" />
            <el-table-column label="销售员" align="center" prop="salesMan" />
            <el-table-column label="订单金额" align="center" prop="createTime" width="100">
              <template slot-scope="scope">
                <span>￥{{ scope.row.totalMoney }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单类型" align="center" width="100">
              <template slot-scope="scope">
                <span>{{ orderTypeFormat(scope.row.orderType) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" width="100">
              <template slot-scope="scope">
                <span>{{ orderStatusFormat(scope.row.orderStatus) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="125px">
              <template slot-scope="scope">
                <!--<el-button size="mini" type="text" icon="el-icon-download" @click="handleDownloadQuote(scope.row)">下载提案</el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else v-loading="loading" element-loading-text="加载中..." class="no-info">
          <div style="padding: 100px 0;text-align: center">
            暂无数据
          </div>
        </div>
      </div>
    </mall-shelf>
    <!-- 分页 -->
    <div style="float:right">
      <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />
    </div>
  </div>
</template>

<script>
import MallShelf from '@/components/MallShelf'
import SalesOrderApi from '@/api/order/SalesOrderApi'
import DictValueApi from '@/api/system/DictValueApi'
import MallButton from '@/components/MallButton'

export default {
  components: {
    MallShelf,
    MallButton
  },
  data() {
    return {
      options: {
        sysYnTypeOptions: [],
        orderTypeOptions: [],
        sourceTypeOptions: [],
        salesOrderStatusOptions: [],
        payTypeOptions: []
      },
      queryParams: {
        salesOrderNo: null,
        customerName: null,
        orderStatus: null
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      loading: true
    }
  },
  created() {
    this.loadOptions()
    this.handleQuery()
  },
  methods: {
    loadOptions() {
      DictValueApi.list({ dictCode: 'oms_sales_order_type' }).then(response => {
        this.options.orderTypeOptions = response.data
      })
      DictValueApi.list({ dictCode: 'oms_sales_order_source' }).then(response => {
        this.options.sourceTypeOptions = response.data
      })
      DictValueApi.list({ dictCode: 'oms_sales_order_status' }).then(response => {
        this.options.salesOrderStatusOptions = response.data
      })
      DictValueApi.list({ dictCode: 'pay_type' }).then(response => {
        this.options.payTypeOptions = response.data
      })
    },
    handleQuery() {
      this.loading = true
      SalesOrderApi.myOrderPage(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    toOrderDetail(salesOrderId) {
      this.$router.push({
        path: '/salesOrder/orderDetail/' + salesOrderId
      })
    },
    toGoodsDetail(id) {
      window.open(window.location.origin + '#/goodsDetail?spuId=' + id)
    },
    // 下载提案
    handleDownloadQuote(salesOrder) {
      SalesOrderApi.downloadQuote(salesOrder.id).then(response => {
        if (response.data) {
          this.$common.download(process.env.VUE_APP_ATTACHMENT_URL + '/' + response.data)
        } else {
          this.$message.warning('请先生成提案')
        }
      })
    },
    orderTypeFormat(type) {
      return this.$common.getDictValueName(this.options.orderTypeOptions, type)
    },
    orderSourceFormat(source) {
      return this.$common.getDictValueName(this.options.sourceTypeOptions, source)
    },
    orderStatusFormat(status) {
      return this.$common.getDictValueName(this.options.salesOrderStatusOptions, status)
    },
    payTypeFormat(type) {
      return this.$common.getDictValueName(this.options.payTypeOptions, type)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../styles/mixin";

.query {
  height: 60px;
  line-height: 60px;

  > div {
    display: flex;
    align-items: center;

    a {
      padding: 0 15px;
      height: 100%;
      @extend %block-center;
      font-size: 12px;
      color: #999;

      &.active {
        color: #5683EA;
      }

      &:hover {
        color: #5683EA;
      }
    }

    input {
      @include wh(80px, 30px);
      border: 1px solid #ccc;
    }

    input + input {
      margin-left: 10px;
    }
  }

  .price-interval {
    padding: 0 15px;
    @extend %block-center;

    input[type=number] {
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      border-radius: 5px;
    }
  }
  .el-form-item {
    margin-bottom: 0;
  }
}

.gray-sub-title {
  height: 38px;
  padding: 0 24px;
  background: #EEE;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  line-height: 38px;
  font-size: 12px;
  color: #666;
  display: flex;
  span {
    display: inline-block;
    height: 100%;
  }
  .first {
    display: flex;
    justify-content: space-between;
    flex: 1;
    .f-bc {
      > span {
        width: 112px;
        text-align: center;
      }
    }
  }
  .last {
    width: 230px;
    text-align: center;
    display: flex;
    border-left: 1px solid #ccc;
    span {
      flex: 1;
    }
  }
}

.bt {
  border-top: 1px solid #EFEFEF;
}

.date {
  padding-left: 0px;
}

.order-id {
  margin-left: 25px;
}

.cart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  &:hover {
    .del-order {
      display: block;
    }
  }
  .del-order {
    display: none;
  }
  .cart-l {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 15px 0;
    justify-content: space-between;
    position: relative;
    &:before {
      position: absolute;
      content: ' ';
      right: -1px;
      top: 0;
      width: 1px;
      background-color: #EFEFEF;
      height: 100%;
    }
    .ellipsis {
      margin-left: 20px;
      width: 220px;
    }
    .img-box {
      border: 1px solid #EBEBEB;
    }
    img {
      display: block;
      @include wh(80px);
    }
    .cart-l-r {
      display: flex;
      > div {
        text-align: center;
        width: 112px;
      }
    }
    .car-l-l {
      display: flex;
      align-items: center;
    }
  }
  .cart-r {
    width: 230px;
    display: flex;
    span {
      text-align: center;
      flex: 1;
    }
  }
}

.prod-operation {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 254px;
  div {
    width: 100%;
    text-align: center;
  }
  div:last-child {
    padding-right: 24px;
  }
}
.w > .el-table__expanded-cell {
  padding: 10px 10px;
}
img {
  width: 80px;
  height: 80px;
}
</style>
